<template>
    <div id="noticeList" :style="style">
        <!--@scroll="scrolling" todo 可能会有的滚动自动加载更多-->
        <div class="title">
            <h1>公告</h1>
        </div>
        <ul class="list">
            <li v-for="el in list">
                <h2>{{el.title}}
                    <small>· {{el.createdDate}}</small>
                </h2>
                <p v-for="p in el.article" track-by="$index">{{p}}</p>
            </li>
        </ul>
        <!--<button>上一页</button>-->
        <!--<button>下一页</button>-->
    </div>
</template>

<script type="text/babel">

    var Status_tab = require('../../component/sideNav/tabStatus');
    let message = require('../../component/message/message.es6');

    module.exports = {
        props: ['width', 'bannerShow', 'tab'],
        data: ()=>({
            list: []
        }),
        computed: {
            style: function () {
                return {
                    'width': (this.width * 0.7) + 'px',
                    'left': (this.width * 0.3) + 'px'
                }
            }
        },
        methods: {},
        created: function () {
            this.tab = Status_tab.notice;
            this.bannerShow = true;
            this.$http({url: '/api/notice/list', method: 'GET'})
                    .then((res)=> {
                        // success callback
                        let that = this;
                        this.list = res.data.list.map((c)=> {
                            var t = new Date(c.created);
                            return {
                                createdDate: `${t.getFullYear()}-${t.getMonth() + 1}-${t.getDate()}`,
                                created: c.created,
                                id: c._id,
                                title: c.title,
                                article: c.article.split('\n')
                            }
                        });
                        this.list.sort((a, b)=> {
                            return a.created < b.created;
                        });
                    }, function (response) {
                        // error callback

                    });
        }
    }
</script>